import React, { useState, useEffect } from "react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Filter } from "lucide-react";
import { ConstructionMethodTemplateAPI } from "@/api/ConstructionMethodTemplate";

export default function SchemeFilters({
  filters,
  onFilterChange,
  crossingPoints,
  projects,
}) {
  const [constructionMethods, setConstructionMethods] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const fetchConstructionMethods = async () => {
      try {
        setIsLoading(true);
        // 调用接口获取施工方法数据
        const response = await ConstructionMethodTemplateAPI.getList();
        // 假设接口返回的数据结构为 { data: [...] }
        // 根据实际接口返回结构调整
        setConstructionMethods(response.data || []);
      } catch (error) {
        console.error("获取施工方法数据失败:", error);
        setConstructionMethods([]);
      } finally {
        setIsLoading(false);
      }
    };

    fetchConstructionMethods();
  }, []);

  const handleFilterChange = (type, value) => {
    onFilterChange({
      ...filters,
      [type]: value,
    });
  };

  return (
    <div className="flex gap-3 flex-wrap">
      <div className="flex items-center gap-2">
        <Filter className="w-4 h-4 text-gray-500" />
        <Select
          value={filters.projectId || "all"}
          onValueChange={(value) => handleFilterChange("projectId", value)}
        >
          <SelectTrigger className="w-40">
            <SelectValue placeholder="项目" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">全部项目</SelectItem>
            {projects &&
              projects
                .filter(
                  (project) =>
                    project &&
                    project.id &&
                    project.id.trim() !== "" &&
                    project.projectName
                )
                .map((project) => (
                  <SelectItem key={project.id} value={project.id}>
                    {project.projectName}
                  </SelectItem>
                ))}
          </SelectContent>
        </Select>
      </div>

      <div className="flex items-center gap-2">
        <Select
          value={filters.crossingPointId || "all"}
          onValueChange={(value) =>
            handleFilterChange("crossingPointId", value)
          }
        >
          <SelectTrigger className="w-40">
            <SelectValue placeholder="跨越点" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">全部跨越点</SelectItem>
            {crossingPoints &&
              crossingPoints
                .filter(
                  (point) =>
                    point && point.id && point.id.trim() !== "" && point.name
                )
                .map((point) => (
                  <SelectItem key={point.id} value={point.id}>
                    {point.name}
                  </SelectItem>
                ))}
          </SelectContent>
        </Select>
      </div>

      <div className="flex items-center gap-2">
        <Select
          value={filters.constructionMethod || "all"}
          onValueChange={(value) =>
            handleFilterChange("constructionMethod", value)
          }
          disabled={isLoading}
        >
          <SelectTrigger className="w-40">
            <SelectValue placeholder="施工方法" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">全部方法</SelectItem>
            {isLoading ? (
              // 修复：使用非空value避免错误
              <SelectItem value="loading" disabled>
                加载中...
              </SelectItem>
            ) : (
              constructionMethods.map((method) => (
                <SelectItem key={method.id} value={method.id}>
                  {method.methodName}
                </SelectItem>
              ))
            )}
          </SelectContent>
        </Select>
      </div>
      <div className="flex items-center gap-2">
        <Select
          value={filters.approvalStatus || "all"}
          onValueChange={(value) => handleFilterChange("approvalStatus", value)}
        >
          <SelectTrigger className="w-32">
            <SelectValue placeholder="审批状态" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">全部状态</SelectItem>
            <SelectItem value="notStarted">未开工</SelectItem>
            <SelectItem value="inProgress">已开工</SelectItem>
            <SelectItem value="completed">已完工</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}
